<template>
    <fl-navBar dark :border="false" :title="mavTitle" color="#000000" fixed background-color="#ffffff" status-bar
        left-icon="left" />
    <scroll-view class="docToReadDetail" scroll-y>
        <view class="detail_container">
            <uni-collapse ref="collapse">
                <uni-collapse-item name="1" class="collapse-item" title-border="none" :border="false">
                    <template v-slot:title>
                        <view class="doc_msg">
                            <text class="line"></text>
                            <text class="doc_title">{{ type == 1 || type == 2 ? '公文信息' : '通知信息' }}</text>
                        </view>
                    </template>
                    <view class="detail_content">
                        <view class="detail_item doc_theme">
                            <text class="item_key">{{ type == 1 || type == 2 ? '来文标题' : '通知主题' }}</text>
                            <text class="item_value">{{ doc.bumphTheme || doc.informTheme }}</text>
                        </view>
                        <view class="detail_item">
                            <text class="item_key">类型</text>
                            <text class="item_value">{{ doc.bumphType }}</text>
                        </view>
                        <view class="detail_item">
                            <text class="item_key">发文单位</text>
                            <text class="item_value">{{ doc.issueUnit || doc.informUnit }}</text>
                        </view>
                        <view class="detail_item" v-if="type == 1 || type == 2">
                            <text class="item_key">公文文号</text>
                            <text class="item_value">{{ doc.bumphNumber }}</text>
                        </view>
                        <view class="detail_item">
                            <text class="item_key">发文人</text>
                            <text class="item_value">{{ doc.userName || doc.informIssueName }}</text>
                        </view>
                        <view class="detail_item">
                            <text class="item_key">是否需要上传反馈材料</text>
                            <text class="item_value">{{ doc.ifAccessories == 0 ? '不需要' : '需要' }}</text>
                        </view>
                        <view class="detail_item" v-if="type == 1 || type == 2">
                            <text class="item_key">发文时间</text>
                            <text class="item_value">{{ doc.bumphTime }}</text>
                        </view>
                        <view class="detail_item">
                            <text class="item_key">超期提醒时间</text>
                            <text class="item_value">{{ doc.overdueTime }}</text>
                        </view>
                        <view class="detail_item">
                            <text class="item_key">截止时间</text>
                            <text class="item_value">{{ doc.deadline }}</text>
                        </view>
                        <view class="detail_item doc_theme" v-if="type == 3">
                            <text class="item_key">通知内容</text>
                            <text class="item_value">{{ doc.informContent }}</text>
                        </view>
                    </view>
                </uni-collapse-item>
                <uni-collapse-item name="2" :open="open" class="collapse-item" title-border="none" :border="false">
                    <template v-slot:title>
                        <view class="doc_msg">
                            <text class="line"></text>
                            <text class="doc_title">阅办信息</text>
                        </view>
                    </template>
                    <view class="detail_readMsg">
                        <view class="detail_readMsg" style="border-bottom: 2rpx solid #EBEDF0;">
                            <view class="doc_file" style="padding-bottom: 10rpx;" v-if="doc.fileList">
                                <view class="item_file">公文附件</view>
                                <view v-if="doc.fileList.length > 0" class="file_name" @tap="handlePrev(dd)"
                                    v-for="(dd, ii) in doc.fileList" :key="ii">{{
                                        dd.originalName }}
                                </view>
                                <view v-else class="nofile">暂无附件</view>
                            </view>
                        </view>
                        <view class="doc_file" style="padding-bottom: 10rpx;border-bottom: 2rpx solid #EBEDF0;">
                            <view class="item_file">备注</view>
                            <view class="empty">{{ doc.remark ? doc.remark : '暂无' }}</view>
                            <!-- <view class="remork" v-else>
                                <textarea disabled auto-height v-model="doc.remark" placeholder-style="color:#999"
                                    style="color: #333;font-size: 28rpx;width: 100%;" placeholder="请输入" />
                            </view> -->

                        </view>
                        <!-- <view class="feedfile_box">
                            <view class="upload_file">
                                <view class="left_feedback">反馈附件</view>
                                <view class="fileBtn">
                                    <uni-file-picker v-show="type == 2 || type == 4" @select="handleUpload"
                                        v-model="form.fileList" :auto-upload="true" file-mediatype="all" />
                                </view>
                            </view>
                            <fl-fileList v-if="form.fileList.length > 0" @delFileItem="delFileItem"
                                :fileList="form.fileList" :closeShow="type == 2 || type == 4" />
                            <view v-else class="empty">暂无附件</view>
                        </view> -->
                        <!-- <view class="doc_file">
                            <view class="advice" style="margin-bottom: 10rpx;">
                                <text v-if="type == 2 || type == 4" style="color: red;"></text>阅办记录
                            </view>
                            <fl-recordList :ifAccessories="doc.ifAccessories" :issueOneList="doc.issueOneList"/>
                        </view> -->
                        <view class="doc_file"  v-if="ifRead === '0'">
                            <view class="advice">
                                <text v-if="type == 2 || type == 4" style="color: red;">*</text>阅办意见
                            </view>
                            <!-- 1和3代表查看 -->
                            <view v-if="(type == 1 || type == 3) && !doc.feedback" style="height:200rpx;color:#333"
                                class="empty">暂无
                            </view>
                            <view v-else class="file_name Textarea">
                                <textarea :disabled="type == 1 || type == 3 || (type == 4 && ifRead == 1)||(type == 2 && ifRead == 1)"
                                    style="height:200rpx" v-model="doc.feedback"
                                    placeholder-style="color:#A0A0A0;font-size:28rpx" placeholder="请输入" />
                            </view>
                        </view>

                    </view>
                </uni-collapse-item>
            </uni-collapse>
        </view>
    </scroll-view>
    <view class="submitBtn" :style="{ paddingBottom: safeAreaInsets?.bottom + 'px' }">
        <view class="submitBtn" v-if="type == 2 || type == 4 || type == 1">
            <view @tap="back" class="cancel">返回</view>
            <view v-if="(isComplete !== '1' && type == 2)||(ifRead == 0 && type == 4)" class="confire" @tap="handleReading">阅办</view>
            <view v-if="ifRead === '1' && type == 2" class="confire" @tap="handleReceive">流转</view>
        </view>

    </view>
</template>
<script setup>
import { issueinnerDetail, issueupdateRead, noticereceiveDetail, noticeAddUser } from '@/api/http'
import { ref, nextTick } from 'vue'
import { onLoad } from "@dcloudio/uni-app";
import modal from '@/plugins/modal'
import { viewFile } from '@/utils/common'
const { safeAreaInsets } = uni.getSystemInfoSync()
//type ==1 公文接收的查看 ==2 公文接受的阅办   type==3代表通知的接受，type==4通知的阅办
const props = defineProps(['id', 'type', 'ifRead','isComplete'])
const form = ref({ fileList: [] })
const open = ref(false)
const mavTitle = ref('')
const doc = ref({})
const title = {
    '1': '查看公文',
    '2': '阅办公文',
    '3': '查看通知',
    '4': '阅办通知',
}

onLoad(() => {
    mavTitle.value = title[props.type]
    getList()
})

// 阅办
const handleReading = async () => {
    if (!doc.value.feedback) return modal.msgError('请填写阅办意见')
    const { type } = props
    if (type == 2) {
        // 公文接收阅办
        const par = {
            feedback: doc.value.feedback,
            issueId: doc.value.issueId,
            issueOneId: props.id,
            subFileList: form.value.fileList
        }
        await issueupdateRead(par)

    } else if (type == 4) {
        // 消息接收 阅办
        const par = {
            feedback: doc.value.feedback,
            subFileList: form.value.fileList,
            issueOneId: props.id,
            issueId: doc.value.issueId

        }
        await noticeAddUser(par)
    }
    modal.msgSuccess('操作成功')
    setTimeout(() => {
        uni.$emit('read')
        uni.navigateBack()
    }, 1000);

}
// const delFileItem = (index) => {
//     form.value.fileList.splice(index, 1)
// }

const getList = async () => {
    let { type, id } = props
    let res;
    if (type == 1 || type == 2) {
        // 公文接收 查看 和 阅办 和流转
        res = await issueinnerDetail(id)
        doc.value = res.data
        // doc.value.feedback = res.data.issueOneList[0].feedback;
        doc.value.remark = res.data.remark || '暂无';
        // doc.value.bumphType = filters(res)
        doc.value.bumphType = '公文'
        form.value.fileList = res.data.issueOneList[0].fileList || []

    } else if (type == 3 || type == 4) {
        // 通知接受 查看 和编辑
        res = await noticereceiveDetail(id)
        doc.value = res.data
        form.value.fileList = res.data.issueOneList[0].fileList || []
        doc.value.bumphType = "通知";
    }
    nextTick(() => {
        open.value = true
    })
}
const back = () => {
    uni.navigateBack({ delta: 1 })
}
const handleReceive = () => {
    console.log(doc.value);
    uni.navigateTo({ url: '/pages/wanderReceive/index?type=5&issueId='+doc.value.issueId+'&issueOneId='+ doc.value.issueOneList[0].issueOneId})
}
// const filters = (res) => {
//     let re = bumph_type.find(ele => {
//         return ele.dictValue == res.data.bumphType
//     })
//     return re.dictLabel
// }


// const handleUpload = async (e) => {
//     let tempFilePaths = e.tempFilePaths
//     let tempFiles = e.tempFiles
//     tempFilePaths.forEach(async (ele, index) => {
//         const res = await upload({ filePath: ele })
//         const re = res.data[0]
//         form.value.fileList.push({ ...re, file: tempFiles[index].file, url: re.url })
//         modal.msgSuccess('上传成功')
//     })


// }
const handlePrev = async (ele) => {
    viewFile(ele)
}
</script>
  
<style lang="scss">
page {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: #fff;

}

// .feedfile_box {
//     border-bottom: 2rpx solid #EBEDF0;
//     padding: 40rpx 0;


//     .upload_file {
//         display: flex;
//         justify-content: space-between;
//         align-items: center;
//         min-height: 80rpx;


//         .left_feedback {
//             font-size: 28rpx;
//             color: #333333;
//         }
//     }
// }


.Textarea {
    padding-left: 10rpx;

    textarea {
        color: #333;
        font-size: 28rpx;
    }
}

.docToReadDetail {
    flex: 1;
    height: 100%;
    overflow: hidden;

    .detail_container {
        height: 100%;
        padding: 0 30rox 0 25rpx;

        .collapse-item {
            background-color: #fff;
            // border-bottom: 2rpx solid #EBEDF0;

            .doc_msg {
                display: flex;
                align-items: center;
                height: 100rpx;
                font-size: 32rpx;
                font-weight: 700;
                color: #000;
                padding-left: 25rpx;

                .line {
                    width: 6rpx;
                    height: 30rpx;
                    background-color: #2362A6;
                    margin-right: 12rpx;
                }
            }

            .detail_content {
                width: 710rpx;
                margin: 0 auto;


                .detail_item {
                    display: flex;
                    padding: 0 10rpx;
                    min-height: 90rpx;
                    justify-content: space-between;
                    align-items: center;
                    background-color: #fff;
                    border-bottom: 2rpx solid #EBEDF0;

                    .item_key,
                    .item_value {
                        color: #333333;
                        font-size: 28rpx;
                    }

                    .readed_item {
                        width: 100%;
                        padding: 20rpx 0;
                        border-bottom: 2rpx solid #EBEDF0;

                        .who_read {
                            width: 100%;
                            color: #333;
                            font-size: 28rpx;

                            margin: 10rpx 0 15rpx 0;
                        }

                        .who_status {
                            display: flex;
                            align-items: center;
                            justify-content: flex-end;

                            .read {
                                color: #2362A6;
                                padding: 0 8rpx;
                            }

                            .read_time {
                                padding-top: 5rpx;
                            }
                        }
                    }
                }

                .doc_theme {
                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;
                    padding: 20rpx 10rpx 40rpx 10rpx;


                    .item_key {
                        margin-bottom: 10rpx;
                    }

                    .item_value {
                        margin-bottom: 10rpx;
                        line-height: 40rpx;
                    }
                }
            }

            .detail_readMsg {
                width: 710rpx;
                margin: 0 auto;

                .doc_file {
                    padding: 25rpx 0rpx 0;

                    .advice {
                        font-size: 28rpx;
                        color: #333;
                    }

                    .item_file {
                        color: #333;
                        font-size: 28rpx;
                        margin: 0 0 10rpx 0;
                    }

                    .file_name {
                        display: flex;
                        align-items: center;
                        color: #0D80D7;
                        font-size: 28rpx;
                        line-height: 40rpx;
                        border-bottom: 2rpx solid #EBEDF0;
                        // padding-bottom: 25rpx;
                        min-height: 110rpx;

                        &:last-child {
                            border-bottom: none;
                        }

                    }

                    .lz_obj {
                        padding-bottom: 6rpx;
                    }

                    .lzObject {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        font-size: 28rpx;
                        color: #000;
                        min-height: 90rpx;

                        .more {
                            display: flex;
                            align-items: center;
                            color: #959595;

                            .iconfont {
                                transform: rotate(180deg);
                                color: #959595;
                                font-size: 30rpx;
                                margin-left: 10rpx;
                            }

                        }
                    }
                }
            }

        }
    }
}


.back {
    width: 690rpx;
    height: 90rpx;
    border: 2rpx solid #DCDCDC;
    border-radius: 45rpx;
    color: #000;
    font-size: 28rpx;
    text-align: center;
    line-height: 90rpx;
}

.submitBtn {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 750rpx;
    background-color: #fff;



    .cancel,
    .confire {
        width: 220rpx;
        height: 90rpx;
        border: 2rpx solid #DCDCDC;
        border-radius: 45rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #000;
        font-size: 28rpx;
        background-color: #fff;
    }

    .confire {
        background-color: #2362A6;
        color: #fff;
        border: none;
    }
}
</style>
  